<template>
    <div class="returnFood-container">
        <div class="returnFood-container-top">
            <div class="top-left">
                <div class="top-left-one">退菜退款</div>
                <div class="top-left-one" style="color: #212121;">桌台：{{ tableInfo.roomName }}</div>
                <div class="top-left-two">实际消费： <span style="color: #FF3333;">￥{{ formatNumber(tableInfo.payAmt) }}</span>
                </div>
                <div class="top-left-two">订单：{{ tableInfo.orderBatchCode }}</div>
                <div class="top-left-two">开台时间：{{ valiTime(tableInfo.startTime) }}</div>
            </div>
            <div class="top-right" @click="router.replace({ path: '/order/orderTable' })">关闭</div>
        </div>
        <div class="returnFood-container-main">
            <div class="main-left">
                <div class="main-left-top">
                    <div class="top-left">已点商品</div>
                    <div class="top-right">￥{{ formatNumber(selectGoodsPrice) }}</div>
                </div>
                <div class="main-left-nav">
                    <div class="nav-item">序号</div>
                    <div class="nav-item">商品名称</div>
                    <div class="nav-item">数量（单位）</div>
                    <div class="nav-item">单价</div>
                    <div class="nav-item">收款金额</div>
                </div>
                <div class="main-left-center" v-if="goodsList">
                    <!-- <div class="center-item" v-for="(v, k) in goodsList.slice(leftPageBefore, leftPageAfter)" :key="k" -->
                    <div class="center-item" v-for="(v, k) in goodsList" :key="k"
                        @click="changeFood(k, v.index)">
                        <div class="item-id">{{ v.index }}</div>
                        <div class="item-value" :class="{ active: v.isSelect }">
                            <div class="spe">
                                <div class="package" v-if="v.isPackage"></div>
                                {{ v.goodsName }}
                            </div>
                            <div style="width: 25%;">{{ v.orderQty }}</div>
                            <div style="width: 20%;">{{ formatNumber(v.salePrice) }}</div>
                            <div style="width: 25%;">{{ formatNumber(v.payAmt) }}</div>
                        </div>
                    </div>
                </div>
                <!-- <div class="main-left-footer" @click="leftPageChange">
                    <div class="footer-title">共{{ leftPage }}页</div>
                    <div class="footer-btn" :class="{ active: leftPageIndex <= 1 }" data-type="up">上一页</div>
                    <div class="footer-btn" :class="{ active: leftPageIndex >= leftPage }" data-type="down">下一页</div>
                </div> -->
            </div>
            <div class="main-right">
                <div class="main-left-top">
                    <div class="top-left">已选退菜商品</div>
                    <div class="top-right">￥{{ formatNumber(returnGoodsPrice) }}</div>
                </div>
                <div class="main-left-nav">
                    <div class="nav-item">序号</div>
                    <div class="nav-item">商品名称</div>
                    <div class="nav-item">数量（单位）</div>
                    <div class="nav-item">单价</div>
                    <div class="nav-item">收款金额</div>
                </div>
                <div class="main-left-center" v-if="selectGoodsList">
                    <div class="center-item" v-for="(v, k) in selectGoodsList"
                        :key="k">
                        <div class="item-id">{{ v.index }}</div>
                        <div class="item-value">
                            <div class="spe">
                                <div class="package" v-if="v.isPackage"></div>
                                {{ v.goodsName }}
                            </div>
                            <div style="width: 20%;">{{ v.orderQty }}</div>
                            <div style="width: 25%;">{{ formatNumber(v.salePrice) }}</div>
                            <!-- <div style="width: 15%;">{{ formatNumber(v.orderQty * v.salePrice) }}</div> -->
                            <div style="width: 15%;">{{ formatNumber(v.payAmt) }}</div>
                            <div class="del" @click="delFood(k, v.index)"></div>
                        </div>
                    </div>
                </div>
                <div class="main-right-reasons">
                    <div class="reasons-top">退菜原因</div>
                    <div class="reasons-center">
                        <div class="reasons-center-item" v-for="(v, k) in reasons" :key="k" :class="{ active: v.value }"
                            @click="selectReasons(k)">{{ v.title }}</div>
                    </div>
                </div>
                <div class="main-right-footer">
                    <!-- <div class="footer-left" @click="rightPageChange">
                        <div class="footer-left-value">共{{ rightPage }}页</div>
                        <div class="footer-left-btn" :class="{ active: rightPageIndex <= 1 }" data-type="up">上一页</div>
                        <div class="footer-left-btn" :class="{ active: rightPageIndex >= rightPage }" data-type="down">下一页
                        </div>
                    </div> -->
                    <div></div>
                    <div class="footer-right" @click="refundPay(route.query.state)">退菜/退款</div>
                </div>
            </div>
        </div>
        <div class="returnFood-container-footer">富德快Saas智能收银软件</div>
    </div>
    <el-dialog v-model="showChangeNum" width="35%" top="5%" :show-close="false" :close-on-click-modal=false>
        <div class="changeNum">
            <div class="changeNum-top">修改退货数量</div>
            <div class="changeNum-inp">
                <div class="changeNum-inp-title">可退数量：</div>
                <el-input class="changeNum-inp-value" v-model="input" :placeholder="`可退数量 ${canInput}`" readonly></el-input>
            </div>
            <div class="changeNum-center">
                <div class="changeNum-center-item" @click="handleNum('1')">1</div>
                <div class="changeNum-center-item" @click="handleNum('2')">2</div>
                <div class="changeNum-center-item" @click="handleNum('3')">3</div>
                <div class="changeNum-center-item spe" @click="handleDelLastNum()"></div>
                <div class="changeNum-center-item" @click="handleNum('4')">4</div>
                <div class="changeNum-center-item" @click="handleNum('5')">5</div>
                <div class="changeNum-center-item" @click="handleNum('6')">6</div>
                <div class="changeNum-center-item" @click="handleDelNum()">删除</div>
                <div class="changeNum-center-item" @click="handleNum('7')">7</div>
                <div class="changeNum-center-item" @click="handleNum('8')">8</div>
                <div class="changeNum-center-item" @click="handleNum('9')">9</div>
                <div class="changeNum-center-item" @click="handleNum('0')">0</div>
            </div>
            <div class="changeNum-footer">
                <div class="changeNum-footer-cancle" @click="showChangeNum = false">取消</div>
                <div class="changeNum-footer-confirm" @click="confirm">确认</div>
            </div>
        </div>
    </el-dialog>
    <LoadingSpinner :visible="refundFlag" />
</template>
  
<script setup>
import Api from '@/api'
import { ElNotification } from 'element-plus'
import ls from '@/lib/ls'
import { formatNumber, valiTime } from '@/lib/util.js'
import { getLocalIPv4 } from "@/utils/getip.js";
import { number } from 'superstruct';
const router = useRouter()
const route = useRoute()
const goodsList = ref([]) // 左侧已点商品
const selectGoodsList = ref([]) // 右侧已选退菜商品
const selectGoodsPrice = ref('') // 已点商品价格
const returnGoodsPrice = ref(0) // 退菜商品价格

const leftPageSize = ref(6) // 左侧商品每页多少数据
const leftPageIndex = ref(1) // 左侧商品页码
const leftPageBefore = ref(0) // 左侧商品显示数组开始下标
const leftPageAfter = ref(6)

const rightPageSize = ref(4) // 右侧商品每页多少数据
const rightPageIndex = ref(1) // 右侧商品页码
const rightPageBefore = ref(0) // 右侧商品显示
const rightPageAfter = ref(4)

const leftPage = computed(() => Math.ceil(goodsList.value.length / leftPageSize.value));  // 左边页数
const rightPage = computed(() => Math.ceil(selectGoodsList.value.length / rightPageSize.value)); // 右边页数


const toolIndex = ref() // 过渡用工具（用来记录数组选中元素下标）
const toolID = ref() // 过渡用工具（用来记录数组选中元素的序号）
const tableInfo = ls.get('TABLE_INFO')
console.log(tableInfo);
// 深拷贝
const deepCopy = (obj) => {
    return JSON.parse(JSON.stringify(obj));
}
// 点击选中商品
const orderKey = ref('')
const changeFood = (k, id) => {
    if (goodsList.value[k].orderQty > 1) {
        showChangeNum.value = true // 退菜显示
        orderKey.value = k
        input.value = goodsList.value[k].orderQty + '' // 默认数量
        canInput.value = goodsList.value[k].orderQty // 可退数量
    } else {
        if (selectGoodsList.value.length == 0) {
            selectGoodsList.value.push(deepCopy(goodsList.value[k]))
        } else {
            let isRepeat = false
            selectGoodsList.value.map(e => {
                if (e.backIndex == goodsList.value[k].backIndex) {
                    isRepeat = true
                }
            })
            if (isRepeat) {
                selectGoodsList.value.map(e => {
                    if (e.backIndex == goodsList.value[k].backIndex) {
                        e.orderQty++
                    }
                })
            } else {
                selectGoodsList.value.push(deepCopy(goodsList.value[k]))
            }
        }
        goodsList.value.splice(k, 1)
    }
    sort()
    // console.log(k);
    // if (goodsList.value[k].isSelect) {
    //     return
    // }
    // toolIndex.value = k
    // toolID.value = id
    // if (goodsList.value[k].orderQty > 1) {
    //     showChangeNum.value = true // 退菜显示
    //     input.value = goodsList.value[k].orderQty + '' // 默认数量
    //     canInput.value = goodsList.value[k].orderQty // 可退数量
    // } else {
    //     // goodsList.value[k].isSelect = !goodsList.value[k].isSelect
    //     selectGoodsList.value.push(deepCopy(goodsList.value[k]))
    //     goodsList.value[k].orderQty--
    // }
    // // 左侧商品显示（数量为零的去掉）
    // // goodsList.value = goodsList.value.filter(order => order.orderQty != 0);
    calculateTotal()

    // console.log(goodsList.value);
    // clearFood()
    // // 序号排序
    // selectGoodsList.value.forEach((obj, index) => {
    //     obj.backIndex = index + 1;
    // });

}
// 移除商品
const delFood = (k, id) => {
    let isRepeat = false
    goodsList.value.map(e => {
        if (e.backIndex == selectGoodsList.value[k].backIndex) {
            isRepeat = true
        }
    })
    if (isRepeat) {
        goodsList.value.map(e => {
            if (selectGoodsList.value[k] && e.backIndex == selectGoodsList.value[k].backIndex) {
                e.orderQty = Number(e.orderQty) + Number(selectGoodsList.value[k].orderQty)
                selectGoodsList.value.splice(k, 1)
            }
        })
    } else {
        goodsList.value.push(selectGoodsList.value[k])
        selectGoodsList.value.splice(k, 1)
    }
    sort()
    // goodsList.value.push(selectGoodsList.value[k])
    // selectGoodsList.value.splice(k,1)
    // let itemID = goodsList.value.findIndex(item => item.index === id);
    // if (itemID == -1) {
    //     // 右边对应商品数量已清零
    //     selectGoodsList.value[k].index = goodsList.value.length + 1
    //     goodsList.value.push(selectGoodsList.value[k])
    // } else {
    //     goodsList.value[itemID].orderQty += Number(selectGoodsList.value[k].orderQty)
    //     goodsList.value[itemID].isSelect = false
    // }
    // selectGoodsList.value.splice(k, 1)
    // // 取消选中
    // console.log(itemID);

    calculateTotal()
    // // 序号排序
    // selectGoodsList.value.forEach((obj, index) => {
    //     obj.backIndex = index + 1;
    // });
    // console.log(goodsList.value);
}
// 清掉数量为0的商品
// 序号排序
const sort = () => {
    goodsList.value.map((e, i) => {
        e.index = i + 1
    })
    selectGoodsList.value.map((e, i) => {
        e.index = i + 1
    })
}
const clearFood = () => {
    // orderQty
    goodsList.value = goodsList.value.filter(item => item.orderQty != 0);
    // goodsList.value.forEach((obj, k) => {
    //      obj.index = k + 1;
    // });
}
// ------------------------------------------------- 修改退货数量 ---------------------------------------------------
const showChangeNum = ref(false) // 弹窗显示
const input = ref(1)
const canInput = ref(1)

// 计算右边总价格
const calculateTotal = () => {
    let total = selectGoodsList.value.reduce((acc, item) => {
        // 将每个对象的数量乘以单价，然后加到累加器上
        // return acc + (item.orderQty * item.salePrice);
        return acc + (+item.payAmt);
    }, 0);
    // console.log('goodsList :>> ', goodsList.value);
    let flag = true
    goodsList.value.forEach(item => {
        if (item.orderQty > 0) {
            flag = false
        }
    })
    if (flag) {
        console.log('没有了 :>> ', saleData.value);
        saleData.value.forEach(item => {
            // 抹零 服务费 折扣优惠 补低消
            if (item.type == '抹零') {
                total -= item.amt
            }
            if (item.type == '服务费') {
                total += item.amt
            }
            if (item.type == '折扣优惠') {
            }
            if (item.type == '补低消') {
                total += item.amt
            }
        })
    } else {
        saleData.value.forEach(item => {
            // 抹零 服务费 折扣优惠 补低消
            if (item.type == '抹零') {
                total -= item.amt
            }
        })
    }
    console.log('selectGoodsList :>> ', selectGoodsList.value);
    returnGoodsPrice.value = total
}
// --------------------------- 数字键盘 -------------------------------------------
// 点击数字
const handleNum = (str) => {
    input.value += str
}
const handleDelLastNum = () => {
    input.value = input.value.slice(0, input.value.length - 1);

}
const handleDelNum = () => {
    input.value = ''

}
// ---------  确定 -------------------------
const confirmFlag = ref(false)
const confirm = () => {
    if (input.value > canInput.value) {
        ElNotification({
            title: '提示',
            message: '退菜数不可超过点菜数',
            type: 'warning',
        })
        return
    }
    if (input.value == 0) {
        ElNotification({
            title: '提示',
            message: '退菜数不可为0',
            type: 'warning',
        })
        return
    }
    if(confirmFlag.value){
        return
    }
    confirmFlag.value = true
    setTimeout(() => {
        confirmFlag.value = false
    }, 1000);


    let goodsTemp = deepCopy(goodsList.value[orderKey.value])
    if (selectGoodsList.value.length == 0) {
        goodsTemp.orderQty = input.value
        selectGoodsList.value.push(goodsTemp)
    } else {
        let isRepeat = false
        selectGoodsList.value.map(e => {
            if (e.backIndex == goodsTemp.backIndex) {
                isRepeat = true
            }
        })
        if (isRepeat) {
            selectGoodsList.value.map(e => {
                if (e.backIndex == goodsTemp.backIndex) {
                    e.orderQty = Number(e.orderQty) + Number(input.value)
                    e.payAmt = e.orderQty * e.salePrice
                    // e.realAmt = Number(e.orderQty) + Number(input.value)
                    // e.sourceRealAmt = Number(e.orderQty) + Number(input.value)
                }
            })
        } else {
            goodsTemp.orderQty = input.value
            selectGoodsList.value.push(goodsTemp)
        }
    }
    selectGoodsList.value.map(e => {
        
        e.payAmt = e.toolPayAmt * Number(e.orderQty) / Number(e.sourceOrderQty + e.minusOrderQty)
        e.disAmt = e.toolDisAmt * Number(e.orderQty) / Number(e.sourceOrderQty + e.minusOrderQty)
        // if(e.isUseVipPay){
        //     e.payAmt = e.orderQty * e.vipPrice
        // }else{
        //     e.payAmt = e.orderQty * e.salePrice
        // }
        
        // e.realAmt = Number(e.orderQty) + Number(input.value)
        // e.sourceRealAmt = Number(e.orderQty) + Number(input.value)
    })
    console.log('selectGoodsList.value :>> ', selectGoodsList.value);
    goodsList.value[orderKey.value].orderQty -= input.value
    if (goodsList.value[orderKey.value].orderQty < 1) {
        goodsList.value.splice(orderKey.value, 1)
    }
    
    sort()
    // selectGoodsList.value.push(deepCopy(goodsList.value[toolIndex.value]))
    // let itemID = selectGoodsList.value.findIndex(item => item.index === toolID.value);
    // selectGoodsList.value[itemID].orderQty = input.value
    // showChangeNum.value = false
    calculateTotal()
    showChangeNum.value = false
    // // 序号排序
    // selectGoodsList.value.forEach((obj, index) => {
    //     obj.backIndex = index + 1;
    // });
    // goodsList.value[toolIndex.value].orderQty -= Number(input.value)
    // if (goodsList.value[toolIndex.value].orderQty > 0) {
    //     goodsList.value[toolIndex.value].isSelect = !goodsList.value[toolIndex.value].isSelect
    // }
    // clearFood()
}
// --------------------------------------------------- 上下页 --------------------------------------------
// 左边页码切换
const leftPageChange = (e) => {
    const title = e.target.dataset.type
    if (!title) {
        return
    }
    switch (title) {
        case 'up':
            console.log('上一页');
            if (leftPageIndex.value <= 1) {
                return
            }
            leftPageIndex.value--
            leftPageBefore.value -= leftPageSize.value
            leftPageAfter.value -= leftPageSize.value
            break;

        case 'down':
            console.log('下一页');
            if (leftPageIndex.value >= leftPage.value) {
                return
            }
            leftPageIndex.value++
            leftPageBefore.value += leftPageSize.value
            leftPageAfter.value += leftPageSize.value
            break;
    }

    console.log(leftPageIndex.value, leftPageBefore.value, leftPageAfter.value);
}
// 右侧页码切换
const rightPageChange = (e) => {
    const title = e.target.dataset.type
    if (!title) {
        return
    }
    switch (title) {
        case 'up':
            console.log('上一页');
            if (rightPageIndex.value <= 1) {
                return
            }
            rightPageIndex.value--
            rightPageBefore.value -= rightPageSize.value
            rightPageAfter.value -= rightPageSize.value
            break;

        case 'down':
            console.log('下一页');
            if (rightPageIndex.value >= rightPage.value) {
                return
            }
            rightPageIndex.value++
            rightPageBefore.value += rightPageSize.value
            rightPageAfter.value += rightPageSize.value
            break;
    }

    console.log(rightPageIndex.value, rightPageBefore.value, rightPageAfter.value);
}
// ----------------------------------------------- 原因选中 --------------------------------------------
const selectReasons = (k) => {
    reasons.value[k].value = !reasons.value[k].value

}
const reasons = ref([{
    title: '估清',
    value: false
}, {
    title: '客人不要',
    value: false
}, {
    title: '点错单',
    value: false
}, {
    title: '质量问题',
    value: false
}, {
    title: '出品超时',
    value: false
}, {
    title: '估清',
    value: false
}, {
    title: '估清',
    value: false
}, {
    title: '更多',
    value: false
}, {
    title: '质量问题',
    value: false
}, {
    title: '出品超时',
    value: false
}])
const getReasons = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData","contentData": { parentCode: '572' } })
        .then(res => {
            console.log(res,'GetDicDataGetDicData');
            if(res.result){
                res.result.map(item=>{
                    item.value = false
                    item.title = item.name
                })
            }
           
            reasons.value = res.result
        })
}
getReasons()

// ----------------------------------------------------- 获取已点商品 ------------------------------------------------------------
const saleData = ref([])
const getOrderDetail = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetPayBatchGoodsList", "contentData": { "consumeCode": tableInfo.consumeCode, state: route.query.state, payBatchCode: route.query.payBatchCode, pageSize: 1500, pageIndex: 1 } })
        .then(res => {
            console.log(res);
            goodsList.value = res.result[0].consumeList
            goodsList.value.forEach((obj, index) => {
                obj.backIndex = obj.index;
                obj.toolPayAmt = obj.payAmt
                obj.toolDisAmt = obj.disAmt
            });
            selectGoodsPrice.value = res.result[0].realAmt
            saleData.value = res.result[0].serviceList
            // if(res.goodsList){
            //     goodsList.value = res.goodsList
            //     

            // }

            console.log(res);
        })
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });

const OpPayBatchReturnGoods = () => {
    let tempReason = []
    reasons.value.map(e => {
        if (e.value == true) {
            console.log(e)
            tempReason.push(e.title)
        }
    })
    let contentData = {
        consumeCode: tableInfo.consumeCode,
        payBatchCode: route.query.payBatchCode,
        returnReason: tempReason.toString(),
        detail: []
    }
    let tempDetail = {}
    selectGoodsList.value.map(e => {
        tempDetail = {
            itemCode: e.itemCode,
            goodsCode: e.goodsCode,
            goodsName: e.goodsName,
            uomCode: e.uomCode,
            uomName: e.uomName,
            salePrice: e.salePrice,
            returnQty: e.orderQty,
            totalAmount: e.salePrice * e.orderQty
        }
        contentData.detail.push(tempDetail)
    })
    contentData = { ...contentData, ip: ip.value };
    Api.Common.PcObjProcess.Do({ "functionName": "OpPayBatchReturnGoods", contentData })
        .then(res => {
            console.log(res)
            refundFlag.value = false
            selectGoodsList.value = []
            ElNotification({
                title: '提示',
                message:'退菜成功',
                type: 'success',
            })
            // alert('退菜成功')
        })
}
const refundFlag = ref(false)
const refundPay = (state) => {
    console.log(selectGoodsList.value);
   
    if(!reasons.value.some(item => item.value === true)){
        ElNotification({
            title: '提示',
            message:'请选择退菜原因',
            type: 'warning',
        })
        return
    }
    if(refundFlag.value){
        ElNotification({
            title: '提示',
            message:'加载中，请稍等',
            type: 'warning',
        })
        return
    }
    refundFlag.value = true
    if (selectGoodsList.value.length > 0) {
        if (state == '1') {
            OpPayBatchReturnGoods()
        } else if (state == '2') {
            const allOperTypeIs2 = selectGoodsList.value.every(item => item.operType == '2');
            // 退菜接口参数赋值
            let tempReason = []
            reasons.value.map(e => {
                if (e.value == true) {
                    console.log(e)
                    tempReason.push(e.title)
                }
            })
            let contentData = {
                consumeCode: tableInfo.consumeCode,
                payBatchCode: route.query.payBatchCode,
                returnReason: tempReason.toString(),
                detail: []
            }
            let tempDetail = {}
            selectGoodsList.value.map(e => {
                tempDetail = {
                    itemCode: e.itemCode,
                    goodsCode: e.goodsCode,
                    goodsName: e.goodsName,
                    uomCode: e.uomCode,
                    uomName: e.uomName,
                    salePrice: e.salePrice,
                    returnQty: e.orderQty,
                    totalAmount: e.salePrice * e.orderQty
                }
                contentData.detail.push(tempDetail)
            })
            ls.set('CONTENTDISH', contentData)
            if(allOperTypeIs2){ // 如果是赠送商品退菜
                OpPayBatchReturnGoods()
                returnPrint()
                return
            }
            // console.log(contentData);
            refundFlag.value = false
            // 跳转页面
            router.push({
                path: "/refund",
                query: {
                    orderBatchCode: tableInfo.orderBatchCode,
                    roomName: tableInfo.roomName,
                    payBatchCode: route.query.payBatchCode,
                    returnGoodsPrice: formatNumber(returnGoodsPrice.value),
                    todo: '',
                    goodsItemCodeList:JSON.stringify(selectGoodsList.value)
                },
            })
        }
    } else {
        refundFlag.value = false
        alert('请选择退菜/退款商品')
    }
}

//退菜(退款小票)打印
const returnPrint = () => {
    const goodsData = ls.get('CONTENTDISH')
  
    
    const contentData={...goodsData,...{payDetail:[]},ip:ip.value,type:'sign'}
   
    Api.Common.PcObjProcess.Do({ "functionName": "RefundGoodPrint", contentData })
    .then(res => {
        console.log(res)
    })
}

getOrderDetail()
</script>
  
<style scoped lang="scss">
.returnFood-container {
    padding: 20px 100px 95px;
    background: #F2F2F2;
    position: relative;
    height: 100%;

    .returnFood-container-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;

        .top-left {
            display: flex;
            align-items: center;

            .top-left-one {
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 24px;
                color: #FF3333;
                line-height: 24px;
                margin-right: 100px;
            }

            .top-left-two {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #212121;
                line-height: 18px;
                margin-right: 100px;
            }
        }

        .top-right {
            width: 120px;
            height: 60px;
            background: #CCCCCC;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #212121;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
        }
    }

    .returnFood-container-main {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .main-left {
            width: 840px;
            height: 830px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FFD400;
            position: relative;

            .main-left-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 16px 0 20px;
                width: 840px;
                height: 60px;
                background: #FFD400;
                border-radius: 8px 8px 0px 0px;

                .top-left {
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 20px;
                    color: #212121;
                    line-height: 60px;
                }

                .top-right {
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 20px;
                    color: #FF3333;
                    line-height: 60px;
                }
            }

            .main-left-nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 23px 100px 23px 15px;
                margin-bottom: 20px;

                .nav-item {
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #212121;
                    line-height: 14px;
                }
            }

            .main-left-center {
                overflow-y: auto;
                height: 580px;
                .center-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0px 20px 0 26px;
                    margin-bottom: 20px;

                    .item-id {
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        font-size: 14px;
                        color: #212121;
                        line-height: 14px;
                    }

                    .item-value {
                        display: flex;
                        align-items: center;
                        width: 760px;
                        height: 80px;
                        background: #FAFAFA;
                        border-radius: 8px;
                        position: relative;

                        &.active {
                            background: #FFFBE3;
                        }

                        .package {
                            width: 40px;
                            height: 20px;
                            background-image: url('https://oss.jtmckj.com/pc/images/common/i_table_icon.png');
                            background-repeat: no-repeat;
                            background-position: center;
                            background-size: 100%;
                            margin-right: 10px;
                        }

                        div {
                            font-family: Source Han Sans CN;
                            font-weight: 500;
                            font-size: 14px;
                            color: #212121;
                            line-height: 14px;
                            text-align: center;

                        }

                        .spe {
                            width: 29%;
                            padding-left: 40px;
                            text-align: left;
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }

            .main-left-footer {
                display: flex;
                align-items: center;
                justify-content: end;
                padding-right: 20px;
                padding-top: 20px;
                position: absolute;
                right: 20px;
                bottom: 30px;

                .footer-btn {
                    width: 120px;
                    height: 40px;
                    background: #F2F2F2;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #00AAFF;
                    line-height: 40px;
                    text-align: center;
                    margin-left: 20px;

                    &.active {
                        color: #CCCCCC;
                    }
                }

                .footer-title {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                }
            }
        }

        .main-right {
            width: 840px;
            height: 830px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FFD400;

            .main-left-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 16px 0 20px;
                width: 840px;
                height: 60px;
                background: #FFD400;
                border-radius: 8px 8px 0px 0px;

                .top-left {
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 20px;
                    color: #212121;
                    line-height: 60px;
                }

                .top-right {
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 20px;
                    color: #FF3333;
                    line-height: 60px;
                }
            }

            .main-left-nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 23px 140px 23px 15px;
                margin-bottom: 20px;

                .nav-item {
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #212121;
                    line-height: 14px;
                }
            }

            .main-left-center {
                height: 424px;
                border-bottom: 1px solid #E6E6E6;
                margin: 0px 20px 0 26px;
                overflow-y: auto;
                .center-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    margin-bottom: 20px;

                    .item-id {
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        font-size: 14px;
                        color: #212121;
                        line-height: 14px;
                    }

                    .item-value {
                        display: flex;
                        align-items: center;
                        width: 760px;
                        height: 80px;
                        background: #FAFAFA;
                        border-radius: 8px;
                        position: relative;

                        .package {
                            width: 40px;
                            height: 20px;
                            background-image: url('https://oss.jtmckj.com/pc/images/common/i_table_icon.png');
                            background-repeat: no-repeat;
                            background-position: center;
                            background-size: 100%;
                            margin-right: 10px;
                        }

                        div {
                            font-family: Source Han Sans CN;
                            font-weight: 500;
                            font-size: 14px;
                            color: #212121;
                            line-height: 14px;
                            text-align: center;

                        }

                        .spe {
                            width: 29%;
                            padding-left: 40px;
                            text-align: left;
                            display: flex;
                            align-items: center;
                        }

                        .del {
                            width: 32px;
                            height: 32px;
                            background-image: url('https://oss.jtmckj.com/pc/images/common/i_icon_del.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            cursor: pointer;
                        }
                    }
                }
            }

            .main-right-reasons {
                padding: 20px 0px 20px 20px;

                .reasons-top {
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 18px;
                    color: #212121;
                    line-height: 18px;
                    padding-bottom: 20px;
                }

                .reasons-center {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .reasons-center-item {
                        width: 100px;
                        height: 40px;
                        background: #E6E6E6;
                        border-radius: 8px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                        line-height: 40px;
                        text-align: center;
                        margin-right: 16px;
                        margin-bottom: 12px;
                        cursor: pointer;

                        &.active {
                            background: #FFE566;
                        }
                    }
                }
            }

            .main-right-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 22px 20px;

                .footer-left {
                    display: flex;
                    align-items: center;

                    .footer-left-value {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                        line-height: 16px;
                        margin-right: 20px;
                    }

                    .footer-left-btn {
                        width: 120px;
                        height: 40px;
                        background: #F2F2F2;
                        border-radius: 8px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #00AAFF;
                        line-height: 40px;
                        text-align: center;
                        cursor: pointer;
                        margin-right: 20px;

                        &.active {
                            color: #CCCCCC;
                        }
                    }
                }

                .footer-right {
                    width: 300px;
                    height: 60px;
                    background: #FF6A00;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #FFFFFF;
                    line-height: 60px;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }
    }

    .returnFood-container-footer {
        position: absolute;
        left: 67px;
        bottom: 0px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 12px;
    }
}

.changeNum {
    padding: 20px 40px 40px;
    white-space: nowrap;

    .changeNum-top {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 24px;
        color: #212121;
        line-height: 24px;
        padding-bottom: 47px;
    }

    .changeNum-inp {
        display: flex;
        align-items: center;
        padding-bottom: 133px;

        .changeNum-inp-title {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
            line-height: 16px;
        }

        ::v-deep(.el-input) {
            height: 48px;
            background: #F9F9F9;
            border-radius: 8px;
            padding: 0
        }

        ::v-deep(.el-input__wrapper) {
            height: 48px;
            background: #F9F9F9;
            border-radius: 8px;
            // padding: 0
        }

    }

    .changeNum-center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 60px;

        .changeNum-center-item {
            width: 120px;
            height: 96px;
            background: #E6E6E6;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 32px;
            color: #212121;
            line-height: 96px;
            text-align: center;
            cursor: pointer;
            margin-bottom: 20px;

            &.spe {
                background-image: url('https://oss.jtmckj.com/pc/images/queue/i_btn_del.png');
                background-size: 52px 40px;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }

    .changeNum-footer {
        display: flex;
        align-items: center;
        justify-content: center;

        .changeNum-footer-cancle {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FF6A00;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
            margin-right: 36px;
        }

        .changeNum-footer-confirm {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
        }
    }
}
</style>
  